<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../js/layui/css/layui.css" media="all">
</head>
    <body>
    <div class="layui-form-item">
        <div class="layui-form-item demoTable">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-inline">
                <input type="text" name="title" id="userName" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-btn-group">
                <button type="button" data-type="search" id="search" class="layui-btn">检索</button>
                <button type="button" data-type="add" id="add" class="layui-btn">增加</button>
            </div>
    <table class="layui-hide" id="userTable" lay-filter="tableEvent"></table>
    <script src="../../../js/layui/layui.js"></script>
    <script src="../../../js/myJQ.js"></script>
    <script>
        layui.use(['table','jquery','layer'], function(){

           var basePath = getRootPath();
           var table = layui.table;
           var $ = layui.$;
           var layer = layui.layer;
           table.render({
                elem: '#userTable'
                ,url:'/user/getUserList'
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,id:'tableData'
                ,where:{}
                /*,method:"GET"*/
               /*, page: {
                   layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
                   , curr: 1
                   , groups: 6
                   , limit: 20
                }*/
                ,cols: [[
                    {field:'userId', width:80, title: '用户ID', sort: true}
                    ,{field:'userName', width:100, title: '用户名'}
                    ,{field:'pwd', width:100, title: '密码'}
                    ,{field:'roleName', width:100, title: '角色名'}
                    ,{field:'sort', width:100, title: '排序'}
                    ,{field:'description', width:100, title: '描述'}
                    ,{field:'insertDate', width:150, title: '创建时间',templet:function (data) {
                        if(data.insertDate!=null&&data.insertDate!="")
                           return layui.util.toDateString(data.insertDate,'yyyy-MM-dd HH:mm:ss');
                        else return ""
                       }}
                    ,{field:'updateDate',width:150, title: '更新时间',templet:function (data) {
                        debugger
                        if(data.updateDate!=null&&data.updateDate!="")
                           return layui.util.toDateString(data.updateDate,'yyyy-MM-dd HH:mm:ss');
                        else return""
                       }}
                    ,{field:'caozuo',width:100, title: '操作',templet:function (data) {
                        return '<a class="layui-btn layui-btn-xs layui-btn-danger" data-type="edt" lay-event="edt" lay-id="'+ data.id +'">' +
                               '<i class="layui-icon layui-icon-edit"></i>编辑</a>' +
                               '<a class="layui-btn layui-btn-xs layui-btn-danger" data-type="del" lay-event="del" lay-id="'+ data.id +'">' +
                               '<i class="layui-icon layui-icon-delete"></i>移除</a>';
                    }}
                ]]
            });

           var active = {
               edt:function (obj) {
                   debugger;
               },
               del:function (obj) {
                   debugger;
               },
               search:function () {
                   debugger;
                   var win = layer.msg('查询中，请稍后...',{icon:16,time:false,shade:0});
                   setTimeout(function () {
                       table.reload('tableData',{
                          /* method: 'GET',*/
                           where:{
                               name:$("#userName").val()
                           }
                       })
                       layer.close(win);
                   },800);

               }
           }

           $('.demoTable .layui-btn').on('click',function () {
               var type = $(this).data('type');
               active[type]?active[type].call(this):'';
           });

           var update = function(data){
               var userId= data.userId;
               var title="编辑" ,path = "/user/userEditPage?id="+userId,area =['350px', '500px'];
               layer.open({
                   type: 2,
                   title: title, //不显示标题栏
                   closeBtn: 2,
                   area: area,
                   shade: 0.8,
                   id: (new Date()).valueOf(), //设定一个id，防止重复弹出 时间戳1280977330748
                   btn: ['保存', '取消'],
                   btnAlign: 'r',
                   moveType: 1, //拖拽模式，0或者1
                   content: path,
                   yes: function (data, layero) {
                       debugger;
                       var load = layer.load();
                       //获取当前打开窗口的html
                       var body = layer.getChildFrame('body', data);
                       var userId = body.find("#userId").val();
                       var userName = body.find("#userName").val();
                       var pwd = body.find("#pwd").val();
                       var roleId = body.find("#roleSelect").val();
                       var sort = body.find("#sort").val();
                       var decrp = body.find("#description").val();
                       if(userName.trim()==''){
                           layer.msg('用户不能为空',function () {
                               time:2000
                           });
                           return false;
                       }
                       var params = {};
                       params.userId = userId;
                       params.userName = userName;
                       params.roleId = roleId;
                       params.sort = sort;
                       params.description = decrp;
                       params.pwd = pwd;
                       var url = "/user/updateUser";
                       $.ajax({
                           url:basePath+url,
                           dataType:'json',
                           type:"POST",
                           data:params,
                           success:function (result) {
                               debugger;
                               layer.close(load);
                               layer.msg(result.msg,{time:800});
                               if(result.returnValue="OK"){
                                   location.reload();
                               }
                           }
                       });

                   },
                   btn2: function (index, layero) {
                       debugger;
                   }
               });
           }

           var deletRole = function(obj){
               var params = {};
               params.userId=obj.userId;
                $.ajax({
                    url:basePath+"/user/deleteUser",
                    data:params,
                    dataType:'json',
                    type:'POST',
                    success:function (result) {
                        layer.msg(result.msg)
                        location.reload();
                    }
                });
           }

            //监听工具条
            table.on('tool(tableEvent)', function (obj) {
                var data = obj.data, event = obj.event, tr = obj.tr; //获得当前行 tr 的DOM对象;
                switch(event){
                    case "edt":
                        update(data);
                        break;
                    case "del":
                        deletRole(data);
                        break;
                }
            });


            $("#add").click(function () {
                var title = "新增",path = "/user/userEditPage",area =['350px', '400px'],url="/user/addUser";
                open(title,path,url,area);
            });

            /**
             * 打开新的窗口
             * @param title 窗口名
             * @param path 窗口路径
             * @param url  后台数据交换路径
             */
            var open = function(title,path,url,area){
                layer.open({
                    type: 2,
                    title: title, //不显示标题栏
                    closeBtn: 2,
                    area: area,
                    shade: 0.8,
                    id: (new Date()).valueOf(), //设定一个id，防止重复弹出 时间戳1280977330748
                    btn: ['保存', '取消'],
                    btnAlign: 'r',
                    moveType: 1, //拖拽模式，0或者1
                    content: path,
                    yes: function (data, layero) {
                        debugger;
                        var load = layer.load();
                        //获取当前打开窗口的html
                        var body = layer.getChildFrame('body', data);
                        var userId = body.find("#userId").val();
                        var userName = body.find("#userName").val();
                        var pwd = body.find("#pwd").val();
                        var roleId = body.find("#roleSelect").val();
                        var sort = body.find("#sort").val();
                        var decrp = body.find("#description").val();
                        if(userName.trim()==''){
                            layer.msg('角色名称不能为空',function () {
                                time:2000
                            });
                            return false;
                        }
                        var params = {};
                        params.userId = userId;
                        params.userName = userName;
                        params.roleId = roleId;
                        params.sort = sort;
                        params.description = decrp;
                        params.pwd = pwd;
                        $.ajax({
                            url:basePath+url,
                            dataType:'json',
                            type:"POST",
                            data:params,
                            success:function (result) {
                                layer.close(load);
                                layer.msg(result.msg,{time:5000});
                                if(result.returnValue="OK"){
                                    location.reload();
                                }
                            }
                        });

                    },
                    btn2: function (index, layero) {
                    }
                });
            }
        });


    </script>
    </body>
</html>